<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{
				position: absolute;
				width: 300px;
				height: 300px;
				background: red;
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	<script type="text/javascript">
		//在点击div的时候，给document一个onmousemove
		//在松开div的时候，释放document的onmousemove事件
		//on绑定事件  off接触事件
		//封装函数：让div随着鼠标的移动而移动
		var w = $('div').width();
		var h = $('div').height();
		function moveFn(e){
			$('div').css({
				'left':e.clientX - w/2,
				'top':e.clientY - h/2,
			})
		}
		$('div').on('mousedown',function(){
			$(document).on('mousemove',moveFn)
		})
		$('div').on('mouseup',function(){
			$(document).off('mousemove',moveFn)
		})
	</script>
</html>



